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ABSTRACT- Analysing the data of a deadly pandemic 
that has created a mess in this wonderful world and 
caused a lot of deaths is a need of this hour such that we 
can easily take preventive measures and hold this 
pandemic growth and eradicate it with certain measures 
and proper planning and a study is needed to analyse 
whether any inter-mediate hosts have facilitated the 
transmission of the virus to humans or vice versa and this 
could only be done if precise data is analysed [1][6]. The 
main objective behind writing this paper is to present an 
idea that how knowledge to an emerging frontend 
technology like React JS can lead to a wonderful user 
interface that can serve as a data analyser web software 
for this deadly pandemic. The paper revolves around a 
project created with a bunch of features of React JS from 
exciting frontend components with Material UI to writing 
CSS, JSX and making API calls to collect worldwide data 
related to Corona virus [9]. The major highlights of the 
project entitled in this paper are no page reloads, 
Responsiveness, body-parsing, API calls for data 
collection, JSX (HTML inside JS), sorting algorithms, 
dynamic data representation, REDUX, data representation 
in dynamic graphs/pie charts. In this a large number of 
npm packages like react, react-dom, @material-ui etc 
along with React JS and CSS library like Material UI has 
been used in order to code the website such that it results 
in an attractive, responsive and a beautiful project with a 
single technology that is JS. The web software entitled in 
this paper is a complete package of features of React JS 
integrated with some other frontend technologies like 
CSS and material UI going through which any user can 
analyse the data related to corona virus geographically as 
well as graphically. 
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I. INTRODUCTION 


“COVID19 TRACKER?” is a useful application with a 
bunch of exciting features that it offers to the users from 
no page reloads to all corona virus related data under a 
single web page. It covers all scenarios to achieve the 
requirements of any user searching for worldwide or 
country wise details regarding corona virus. This 
application is developed for serving its users to the fullest 
of it’s potential by providing them a platform where they 
can get the data and information about corona virus not 
only worldwide but also country wise and in graphical as 
well as geographical display. Though the application is 
based more on the frontend development but dynamic 
data is also given equal preference. The data is collected 
by asynchronous API calls to disease.sh that provides 
dynamic data depending on the endpoint used during the 
call. In simple words disease.sh acts as a server to which 
we make GET request to provided endpoint and 
according to endpoint it gives JSON data in response. 


Il. RELATED WORK 


In the world of web development React JS as a 
technology provides a way better approach to represent 
data. And for any analyser user representation of the data 
is everything. It is more convenient to user if it is able to 
gather all information from a single source and that too 
on just clicks of a button. Data analysis and visualization 
is a necessary tool for exploring and communicating 
findings in medical research, especially in 
epidemiological surveillance [3]. Many government 
agencies, universities and companies have launched the 
applications that helps analysing real time situation or 
virus by providing us updates about number of corona 
virus cases in our surroundings [2] so that conclusions 
could be made how to protect us from its widespread. 
Aarogya Setu application in India and COVID Symptom 
Study in UK are some of the applications provided by the 
government of respective countries to their citizens to 
track about the contacts of people in their surroundings 
and the current situation of COVID-19 such that the chain 
of cause could be easily detected and its transmission is 
reduced to an extent by executing plans made with data in 
consideration. These are apps that track covidl9 and 
require the high priority GPS and Bluetooth permissions 
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to track the spread of infection and also give an idea that 
how close you are of an infected person and in which 
zone you spend your time in thus calculating your risks of 
being infected. When considered in field of research on 
health care these days corona virus has become one of the 
most important topic of research and development. 
Before representing any kind of corona virus data its 
authenticity is everything and fetching right data requires 
good knowledge of some JS features. As analysis is the 
something that helps reducing errors, and making things 
precise but it does so only when done on correct data. 
React JS as a frontend library can help writing code in 
components such that everything that you see on the web 
is a component that makes code reusable and whenever 
any change is required somewhere whole code need not 
to be touched and the part that needs an update can be 
easily modified. From writing reusable components to a 
virtual DOM it has features that can help not only in 
prefect representation of data but also in fast execution of 
changes on screen. It can easily be integrated with 
REDUX as a store and firebase as database. React JS is 
one of the biggest field of development these days and is 
being used by big MNC’S for UI development. Thus use 
of this kind of a technology may help creating a 
wonderful UI that helps user to see covid19 related data 
on a single web page and that too in a small interaction or 
clicks and thus boosting the process of analyser’s who 
analyse the data to find perfect solutions to cause. As an 
alarming situation needs an alarming solution thus using 
React Js as a technology can make interface fastest and 
representation of data to fullest using a single page with 
minimal intervention of user. It covers all scenarios to 
achieve the requirements of any user searching for 
worldwide or country wise details regarding corona virus. 
This application is developed for serving its users to the 
fullest of it’s potential by providing them a platform 
where they can get the data and information about corona 
virus not only worldwide but also country wise and in 
graphical as well as geographical display. 


Browser Ul Tree 


Fig. 1: React JS — A development library that divides 
DOM in components 


Figure 1 above shows that how the whole website is 
converted in different components and components being 


on the top of the UI tree being parent components and 
components being below parent are child components. In 
React all the properties of parent component can be 
passed to child component by passing key value pairs to 
child component when called inside parent component. 


IW. METHODOLOGY 


During the development phase of this software certain 
steps were followed to represent the corona virus related 
data in the best way possible. Such that precise data is 
served to a user in different formats including graphical 
and geographical representation. 
Steps followed while development of this project is as 
follows: 
1. Basic structure of the application was created before 
implementation of any code. 
The structure was designed in such a way the whole 
UI looks as a single web page and there are no too 
many instructions for the user to reach to a particular 
data. 


comi9 CO 
TABULAR 


REPRESENTATION OF 
ACTIVE RECOVERED DATA 
CASES CASES 


WORLDWIDE DATA 


LEAFLET GRAPHICAL 


MAP REPRESENTATION OF 
DATA 


Fig. 2: Basic structure of application 


2. Coding phase of the website was initiated and was 
planned in such a way that when a particular variable 
changes the component in the DOM associated to it is 
automatically changed. For example: Map 
automatically changes as soon as you search. 

3. The coding was performed in a hierarchical manner 
such that parent component was implanted first after 
that implementation of child components was 
performed. 

For Example: Parent Component: App Child 
Component: MAP, Search. 

4. As the app was coded in components thus making 

code reusable. 
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5. API call were made to disease.sh in order to get data. 
GET requests were made to endpoints provided by 
disease.sh. 

6. All data fetching calls were made under useEffect() 
hook provided by React JS that takes two parameters 
one as an async function describing what to do and 
second argument as when to run that function. 

7. After collection of the data the data was transformed 
in the required formats as required format for graphs 
is X, Y coordinates. 

8. CSS and Material UI are also used as a helping hand 
to make this website much more attractive. 

9. Two modes of web view are also provided for 
convenience of the user dark mode and light mode. 


Forms Workflows 


Higher Order React Component 


User Interface 
React Component 


Request Module New State 


Redux Store 
Single source of truth, middleware 


Cache 
Middleware 
http response 


http request 


Service End Points 


OData Services 


Fig. 3: Architecture of React JS applications 


Precise data representation and data modification is the 
main aim behind a website that serves figures related to 
any pandemic or healthcare issue [8]. Both of these steps 
are performed with full attention and using proper 
techniques of React JS and JS. As serving a web 
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application without any clear motive is of no use so direct 
and reduced user interaction is maintained throughout the 
project such that user has to do less but will get more data 
that too under a single web page. 


A. Result 


The resulting web application produced serves as a best 
example for a software created taken in care of all React 
JS features and gives user best of UI to use [5]. The 
representation of data is correctly performed and well 
managed and colour combinations used in project are 
well managed in both the modes dark and light. This will 
let a user coming from any part of the world to either 
have a look at worldwide data or search according to 
different countries of choice and not only the data but 
different forms of data. All these things make this web 
application easy to use and contribute in providing it 
responsive and an attractive UI [4]. 


Fig. 4: “COVID 19 TRACKER” Project snapshot in dark 
mode 
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Fig. 5: “COVID 19 TRACKER” Project snapshot in light mode. 


As it is very clear from Figure 4 and 5 that whole project 
is created in components and each component is designed 
in such a way that a very less user interaction is required 
but the data represented is more. There is no need for user 
to search for data from different sources it is just 
available easily with very less interaction and that too 
under a single web. 


IV. FUTURE SCOPE AND CONCLUSION 


Further implementation of some exciting features like 
disease prediction on the basis of symptoms and direction 
of further steps such as finding an appropriate doctor 
nearby user area would add wonders to this application. 
These will be helpful in understanding and developing 
new algorithms for finding doctor’s for users according to 
their area. This is a booming research topic which is still 
going on for surveillance of large crowds in real time 
applications. From this application we conclude that how 
React JS and some basic concepts of frontend 
development can lead to such an exciting web application 
with a bunch of features. Though the application is a 
pretty basic for now but it has a great scope for further 
implementation of some advanced topics and some more 
technologies and for now the application is serving its 
aim to the fullest for which it is developed. 
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